<template>
  <div class="user">
    <header>
      <van-uploader v-model="fileList" max-count="1" />
      <section>
        <p v-if="!token" @click="$router.push('/login')">立即登录</p>
        <p class="sct-num">积分：{{score}}</p>
        <p class="loginout" v-if="token" @click="loginout">退出登录</p>
      </section>
    </header>
    <van-notice-bar
      left-icon="volume-o"
      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
    />
    <div class="order">
      <section @click="$router.push('/orderList')">
        <i class="iconfont icon-dingdan"></i>
        订单
        <i class="iconfont icon-xiangyoujiantou"></i>
      </section>
      <van-grid :border="false">
        <van-grid-item icon="balance-list-o" text="待付款" />
        <van-grid-item icon="todo-list-o" text="待发货" />
        <van-grid-item text="待收货">
          <template #icon>
            <i class="iconfont icon-shouji"></i>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="待评价" />
      </van-grid>
    </div>
    <van-grid class="foot" :column-num="3">
      <van-grid-item icon="photo-o" text="我的余额" />
      <van-grid-item icon="photo-o" text="我的砍价" />
      <van-grid-item icon="photo-o" text="我的礼券" />
      <van-grid-item icon="photo-o" text="我的收藏" />
      <van-grid-item icon="photo-o" @click="$router.push('/addressList')" text="我的地址" />
      <van-grid-item icon="photo-o" text="联系客服" />
    </van-grid>
  </div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getLogs } from '../../api/home/index.js';
export default { 
  setup(props) {
    const { push } = useRouter();
    const fileList = ref([{ url: require("../../assets/img/tangyan.jpeg") }]);
    let token = localStorage.getItem("token");
    const score = ref(0);
    const loginout = () => {
      // 退出登录
      localStorage.removeItem("token");
      push("/login");
    };
    getLogs({token: token}).then(res => {
      score.value = res.data.result[0].score;
    })
    return {
      fileList,
      token,
      loginout,
      score
    };
  },
};
</script>

<style lang="scss" scoped>
header {
  background: #c1b18f;
  padding: 20px;
  display: flex;
  height: 160px;
  align-items: center;
  color: #fff;
  section {
    flex: 1;
    margin-left: 15px;
    .sct-num {
      font-size: 12px;
      width: 100px;
      border-radius: 5px;
      background: #b3a078;
      line-height: 30px;
      padding: 0 10px;
      box-sizing: border-box;
      margin: 10px 0;
    }
    .loginout {
      font-size: 13px;
    }
  }
  // :deep 让其不受 scoped 影响
  //:deep
  :deep(.van-image__img) {
    border-radius: 50%;
  }
  :deep(.van-uploader__preview-delete) {
    border-radius: 50%;
    right: -8px;
    .van-uploader__preview-delete-icon {
      top: 1px;
      right: 1px;
    }
  }
}
.order {
  margin-top: 10px;
  background: #fff;
  padding: 0 10px;
  section {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    .icon-dingdan {
      color: #f7b94b;
      margin-right: 10px;
    }
    .icon-xiangyoujiantou {
      margin-left: auto;
    }
  }
  .icon-shouji {
    font-size: 28px;
  }
}
.foot{
  margin-top: 20px;
}
</style>
